<template>
  <div class="loginWrap">
    <div class="header">
      <!-- <van-nav-bar
        title="登录"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      ></van-nav-bar> -->
    </div>
    <div class="content">
      <div class="logoWrap">
        <img src="./../assets/images/logo.png" alt="" class="logo" />
      </div>
      <div class="loginWrap">
        <van-form @submit="login">
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :clearable="true"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :clearable="true"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >登录</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
    <div class="footer">
      <div class="forget" @click="forgetPassword">忘记密码</div>
      <div class="goRegister" @click="register">还未有账号，去注册</div>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line standard/object-curly-even-spacing
import { LoginIn } from "@/views/api/api.js";
import { Toast } from "vant";
// const sendMSG = require('./../utils/sentMSG')
// 引入阿里云短信
export default {
  components: {},
  data() {
    return {
      username: "", // 用户名
      password: "", // 用户密码
    };
  },
  computed: {},
  created() {},
  methods: {
    // 登录
    login() {
      // 获取已有账号密码
      let params = {
        username: this.username,
        password: this.password,
      };
      let params1 = {
        tel: "13760033755",
      };
      // 发送短信
      // sendMSG(params1).then(res => {
      //   console.log(res, '发送短信')
      // })
      LoginIn(params).then((res) => {
        // console.log(res)
        if (!res.data.code) {
          // 登录成功
          // 写入token
          // this.$store.dispatch('saveUserInfo',response.data.data);//请求回来后，把用户信息存储到VUEX里
          this.$store.commit("LOGOUT");
          this.$store.commit("setUser", res.data.Info);
          this.$store.commit("setToken", res.data.Info);
          let time = new Date();
          this.$store.commit("setLoginTime", time);
          // console.log(this.$store, this.$store.loginTime)
          this.$router.replace({ path: "/index" });
        } else {
          // 登录失败
          this.$store.commit("LOGOUT");
          // console.log(this.$store.state)
          Toast.fail(res.data.msg);
          // console.log(res.data)
        }
      });
    },
    // 点击去注册
    register() {
      this.$router.replace({ path: "/register" });
      // // 创建账号密码
      // let params = {
      //   username: this.username,
      //   password: this.password
      // }
      // SignIn(params).then(res => {
      //   console.log(res)
      // })
    },
    // 点击返回
    onClickLeft() {
      this.$router.go(-1);
    },
    // 点击忘记密码
    forgetPassword() {
      // this.$router.replace({ path: "/login/SafetyProblem" });
      // this.$router.push({
      //   name: "SafetyProblem",
      // });
      this.$router.replace("/index/SafetyProblem");
    },
  },
};
</script>
<style scoped>
.logoWrap {
  width: 1rem;
  margin: 0 auto;
  margin-top: 20px;
}
.logo {
  width: 100%;
}
.footer {
  margin: 0 16px;
  display: flex;
  justify-content: space-between;
}
</style>
